<template>
  <div style="width: 100%;height: 100%" class="home-main">
    <div style="height: calc(100vh - 84px)" class="banner-list">
      <el-carousel :height="bannerHeight + 'px'" motion-blur>
        <el-carousel-item v-for="(item,index) in formData.imageUrl" :key="index">
          <el-image style="width: 100%; height: 100%" :src="item.url"  />
          <div style="position: absolute;z-index: 100;" v-html="item.bannerText" class="ql-editor"
               :style="{left: item.pingyiweizhi == '左边' ? '5%' : item.pingyiweizhi == '中间' ? '50%' : '90%'},
{top: item.shuipingweizhi == '顶部' ? '40px' : item.shuipingweizhi == '居中' ? '50%' : '90%'}"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
<!--    第一部分-->
    <div style="width: 100%;opacity: 0;transform: scale(0)" class="oneTilee">
      <div style="margin:120px 0 40px 0;justify-content: center" class="fixed-row">
        <h2 style="font-size: 44px;font-weight: 600;color: #000">{{formData.sceneJson?.headerTitle1}}</h2>
      </div>
      <div style="width: 100%;justify-content: center" class="fixed-row">
        <el-row :gutter="20" style="width: 60%" v-if="!ixpendItem">
          <el-col :span="8" v-for="item in formData.sceneJson?.headerTitle1Arr.slice(0,6)">
            <div class="fixed-row margin-col" style="flex-direction:column;align-items: center;padding: 45px 0;box-sizing: border-box;margin-bottom: 15px;
border-radius: 5px">
              <img :src="item.url" style="width: 76px;height: 76px;border-radius: 5px">
              <h3 style="font-size: 26px;font-weight: 500;color: #1a1a1a;margin: 14px 0 8px 0">{{item.title}}</h3>
              <p style="font-size: 16px;color: #999">
                {{item.desp}}
              </p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="width: 60%" v-else-if="ixpendItem">
          <el-col :span="8" v-for="item in formData.sceneJson?.headerTitle1Arr">
            <div class="fixed-row margin-col" style="border-radius: 5px;flex-direction:column;align-items: center;padding: 45px 0;box-sizing: border-box;margin-bottom: 15px">
              <img :src="item.url" style="width: 76px;height: 76px;border-radius: 5px">
              <h3 style="font-size: 26px;font-weight: 500;color: #1a1a1a;margin: 14px 0 8px 0">{{item.title}}</h3>
              <p style="font-size: 16px;color: #999">
                {{item.desp}}
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="width: 100%;justify-content: center;margin: 50px 0 150px 0;" class="fixed-row gengduo-btn" v-if="formData.sceneJson?.headerTitle1Arr && formData.sceneJson?.headerTitle1Arr.length > 6">
        <el-button v-if="!ixpendItem && formData.sceneJson?.headerTitle1Arr.length > 6" @click="ixpendItem = true">更多应用</el-button>
        <el-button v-else-if="ixpendItem && formData.sceneJson?.headerTitle1Arr.length > 6" @click="ixpendItem = false">收起</el-button>
      </div>
    </div>

<!--    第二部分-->
    <div style="width: 100%;opacity: 0" class="to-block">
      <div style="margin:120px 0 40px 0;justify-content: center" class="fixed-row">
        <h2 style="font-size: 44px;font-weight: 600;color: #000">{{formData.standbyJson?.headerTitle2}}</h2>
      </div>
      <div style="width: 100%;justify-content: center" class="fixed-row">
        <el-row :gutter="20" style="width: 60%">
          <el-col :span="6" v-for="item in formData.standbyJson?.headerTitle2Arr" style="margin-bottom: 20px">
            <div class="margin-col" style="background:#FEF1CE;border-radius:5px;padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center">
              <img style="width: 100%;height: 200px;margin-bottom: 10px;border-radius: 5px" :src="item.url">
              <h3 style="color: #222;font-weight: 500;font-size: 28px">{{item.title}}</h3>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--    第三部分-->
    <div style="width: 100%">
      <div style="margin:120px 0 40px 0;justify-content: center" class="fixed-row">
        <h2 style="font-size: 44px;font-weight: 600;color: #000">APP下载</h2>
      </div>
      <div style="width: 100%;justify-content: center" class="fixed-row">
        <el-row :gutter="20" style="width: 60%">
          <el-col :span="6" v-for="item in formData.appImageUrl" style="display: flex;flex-direction: column;align-items: center">
            <img :src="item.url" style="width: 200px;height: 200px;border-radius: 10px">
            <div style="padding: 45px 0;box-sizing: border-box;justify-content: center"
            class="fixed-row">{{item.title}}</div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--    第四部分-->
    <div style="width: 100%;margin-bottom: 120px">
      <div style="margin:120px 0 40px 0;justify-content: center" class="fixed-row">
        <h2 style="font-size: 44px;font-weight: 600;color: #000">成功案例</h2>
      </div>
      <div style="width: 100%;justify-content: center" class="fixed-row">
        <el-row :gutter="12" style="width: 65%">
          <el-col :span="4.05" v-for="item in formData.successCaseJson" style="margin-bottom: 20px">
            <div style="width: 100%;justify-content: center" class="fixed-row">
              <img :src="item.url" style="width: 233px;max-height: 68px">
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="width: 100%;height: 50px;background: #353334;color: #fff;line-height:50px;text-align: center;font-size: 14px;">
      Copyright© 2014-2018 All Rights Reserved 版权所有 杭州蓝启 | 京ICP备14045740号-1 | 京公网安备 11011402010147号
    </div>
  </div>
</template>

<script setup lang="ts">
  import {ref} from 'vue'
  import { getHomeList } from '~/api/home'
  const isGengDuo = ref(false)
  const { $gsap, $ScrollTrigger } = useNuxtApp();
  const formData = reactive({})
  const bannerHeight = ref(0)
  const ixpendItem = ref(false)
  onMounted(() => {
    $gsap.to('.oneTilee', {
      opacity: 1,
      scale:1,
      duration: 1,
      scrollTrigger: {
        trigger: '.banner-list',
        start:'center',
        end:'bottom',
      },
    });

    $gsap.timeline({scrollTrigger: {
        trigger: '.oneTilee',
        start:'center',
        end:'bottom',
      }}).to('.to-block',{
      y: -30,
      opacity: 1,
      scale:1,
      duration: 0.8,
    })

    getTableDetail()

  });

  async function getTableDetail(){
    const res = await getHomeList()
    console.log(res.data.records[0],'res.data.records[0]')
    formData.sceneJson = JSON.parse(res.data.records[0].sceneJson)
    formData.standbyJson = JSON.parse(res.data.records[0].standbyJson)
    formData.appImageUrl = JSON.parse(res.data.records[0].appImageUrl)
    formData.successCaseJson = JSON.parse(res.data.records[0].successCaseJson)
    formData.imageUrl = JSON.parse(res.data.records[0].imageUrl)

    bannerHeight.value = document.documentElement.clientHeight - 84
  }
</script>

<style scoped lang="less">
  .margin-col{
    &:hover{
      box-shadow: 0 0 10px 0 #ded9d9;
    }
  }

  .gengduo-btn ::v-deep .el-button{
    padding: 15px 60px;
  }
</style>
